<template>
  <div>
    <div>
      <div style="height: 50px; font-size: 40px" v-if="!playState">
        <span style="color: red">{{ countdown }}</span
        >秒后自动进入无人教育页面
      </div>
    </div>
    <div class="card-content">
      <Card
        v-for="(item, index) in cardList"
        :key="index"
        :title="item.title"
        :remark="item.remark"
        @click="goToTrain(item.id)"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import Card from "@renderer/components/card/card.vue";
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router"; // 添加这一行以导入 useRouter
const router = useRouter();
const countdown = ref(120); // 设置倒计时状态
const vlcContainer = ref(null);
let interval: ReturnType<typeof setInterval>;
const cardList = ref([
  {
    id: 1,
    title: "无人教育",
    remark:
      "自动识别教室在场工人人脸，自动签到、根据岗位自动匹配课程、自动播放",
  },
  {
    id: 2,
    title: "专题教育",
    remark:
      "现场管理人员自行选择某个课程包,课程开始播放，同时开始识别在场工人并记学时",
  },
  {
    id: 3,
    title: "通用教育",
    remark:
      "现场管理人员自行组织教育（宣讲PPT、讲话教育等）,不依托系统内培训素材，可应用系统进行签到和学时记录",
  },
]);
// 启动倒计时
const startCountdown = () => {
  interval = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      router.push("/train");
    }
  }, 1000);
};
function goToTrain(id: number) {
  switch (id) {
    case 1:
      router.push("/train");
      //路由到结束页面
      // router.push("/play-end");
      break;
    case 2:
      router.push("/thematic-education");
      break;
    case 3:
      router.push("/general-education");
      break;
  }
}
//页面销毁时清除定时器
onUnmounted(() => {
  clearInterval(interval);
});
const g_iWndIndex = ref(0); //don't have to set the variable; default to use the current selected window without transmiting value when the interface has window parameters
const g_oLocalConfig = ref(null); //local configuration variable

onMounted(() => {
  startCountdown();
  window.WebVideoCtrl.I_InitPlugin(1000, 500, {
    bWndFull: true, // 是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
    iPackageType: 2,
    // szColorProperty:"plugin-background:0000ff; sub-background:0000ff; sub-border:00ffff; sub-border-select:0000ff",   //2:PS 11:MP4
    iWndowType: 1,
    bNoPlugin: true,
    cbInitPluginComplete() {
      window.WebVideoCtrl.I_InsertOBJECTPlugin(`divPlugin_${props.index}`);
      // 检查插件是否最新
      if (window.WebVideoCtrl.I_CheckPluginVersion() == -1) {
        alert(
          "检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！"
        );
      }
    },
  });
  login();
});

const login = () => {
  if (props.szIP == "" || props.szPort == "") {
    return;
  }
  const iRet = window.WebVideoCtrl.I_Login(
    props.szIP,
    1,
    props.szPort,
    props.szUsername,
    props.szPassword,
    {
      success() {
        console.log("登录成功！", props.index);
        // preView();
        setTimeout(() => {
          preView();
        }, props.index * 500);
      },
      error() {
        console.log("登录失败！");
      },
    }
  );
  if (iRet == -1) {
    console.log("已登录过！");
    preView();
    // setTimeout(() => {
    //   preView();
    // }, props.index * 500);
  }
};
const preView = () => {
  const szDeviceIdentify = `${props.szIP}_${props.szPort}`;
  console.log("szDeviceIdentify", szDeviceIdentify);
  // iWndIndex		播放窗口，如果不传，则默认使用当前选择窗口播放（默认选中窗口0）
  // iStreamType		码流类型1-主码流，2-子码流，默认使用主码流预览
  // iChannelID			播放通道号，默认通道1
  // bZeroChannel	是否播放零通道，默认为false
  // iPort	RTSP端口号，可以选择传入，如果不传，开发包会自动判断设备的RTSP端口
  // success			成功回调函数
  // error		失败回调函数
  WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
    iStreamType: 2, //码流类型，2为子码流
    success: function () {
      //   that.$notify({
      //     title: "成功",
      //     message: "开始预览通道" + iChannelID + "成功",
      //     type: "success",
      //   });
    },
    error(status, xmlDoc2) {
      console.log(xmlDoc2); //不能删除
      // that.$notify({
      //   title: "失败",
      //   message: "开始预览通道" + iChannelID + "失败",
      //   type: "error",
      // });
      if (status === 403) {
        console.log("szInfo 设备不支持Websocket取流！");
      } else {
        console.log("开始预览失败 ", status, xmlDoc2);
      }
    },
  });
};
</script>

<style scoped lang="scss">
.card-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
</style>
